<template>
  <div class="select" ref="sel">
    <div class="input">
      <el-button size="small" type="text" @click.stop="toggleSel"
        >{{ label }} <i class="el-icon-arrow-down"></i
      ></el-button>
    </div>
    <ul
      class="content"
      :class="{ bottom: position == 'bottom', top: position == 'top' }"
      v-show="show"
      ref="content"
    >
      <slot></slot>
    </ul>
  </div>
</template>

<script>
export default {
  name: "tinySelect",
  data() {
    return {
      label: "",
      isMultiple: false,
      show: false,
      position: "bottom",
    };
  },
  props: {
    value: {},
  },
  methods: {
    getElementTop(element) {
      var actualTop = element.offsetTop;
      var current = element.offsetParent;
      while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
      }
      return actualTop;
    },
    setVal(item) {
      this.$emit("input", item);
    },
    handle() {
      this.$emit("blur");
    },
    toggleSel(e) {
      this.show = !this.show;
      if (this.show) {
        document.addEventListener("click", this.toggleSel);
      } else {
        document.removeEventListener("click", this.toggleSel);
      }
    },
    closeSel() {
      console.log("closesel");
      this.show = false;
      document.removeEventListener("click", this.closeSel);
    },
    changeValue(item) {
      console.log(item.label, item.value);
      this.label = item.label;
      this.$emit("input", item.value);
    },
    onClick(item) {
      this.changeValue(item);
      this.toggleSel();
    },
  },
};
</script>

<style scoped  lang="scss">
.select {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}
.input {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  button:focus {
    outline: none;
  }
}
.input > input {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.input > img {
  right: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  transform: translateY(-50%);
}

.content {
  width: 200px;
  max-height: px(300);
  overflow-y: scroll;
  border-radius: 10px;
  position: absolute;
  right: 0;
  background-color: white;
  box-shadow: 0 0 20px 2px #ccc;
  z-index: 2;
}
.content::-webkit-scrollbar {
  display: none;
}

.bottom {
  top: 100%;
}
.top {
  bottom: 125%;
}
.content > li {
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  width: 100%;
  padding: 0 10px;
  overflow: hidden;
}

.content > li:hover {
  color: #409eff;
  background-color: rgba(33, 33, 33, 0.2);
}
</style>